<template>
  <div>
    <el-table :data="state.tableData" stripe size="medium">
      <el-table-column prop="id" label="ID" width="50" sortable></el-table-column>
      <el-table-column prop="orderOn" label="日志编号"></el-table-column>  //订单编号
      <el-table-column prop="total" label="总金额"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template v-slot="scope">
          <el-tag type="info" v-if="scope.row.status === 0">已取消</el-tag>
          <el-tag type="warning" v-if="scope.row.status === 1">待跟进</el-tag>
          <el-tag type="primary" v-if="scope.row.status === 2">待处理</el-tag>
          <el-tag type="primary" v-if="scope.row.status === 3">待确认</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 4">待评价</el-tag>
          <el-tag type="success" v-if="scope.row.status === 5">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150px"></el-table-column>
      <el-table-column prop="payTime" label="产生时间"></el-table-column>
      <el-table-column prop="payno" label="确认编号"></el-table-column>
      <el-table-column label="详情">
        <template v-slot="scope">
          <el-button @click="detail(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作"  width="180" align="center">
        <template v-slot="scope">
<!--          //待支付-->
          <el-button type="warning" v-if="scope.row.status === 1">导出</el-button>
<!--          //发货-->
          <el-button type="success" @click="changeStatus(scope.row.status, scope.row.id)" v-if="scope.row.status === 2">导出</el-button>
<!--          //已发货-->
          <el-button type="primary" v-if="scope.row.status === 3">导出</el-button>
<!--          //订单完成-->
          <el-button type="warning" @click="changeStatus(scope.row.status, scope.row.id)" v-if="scope.row.status === 5">导出</el-button>
          <el-popconfirm title="确认取消吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button link type="danger"><el-icon><Delete /></el-icon>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import request from "../request.js";
import {ElNotification} from "element-plus";
import {Delete} from '@element-plus/icons-vue'

const state = reactive({
  tableData:[],
  cart:{}
})

const load = () => {
  request.get("/order/findAll").then(res => {
    state.tableData = res.data
  })
}
load()

const changeStatus = (status, id) => {
  state.cart.status = status
  state.cart.id = id
  request.put('/order', state.cart).then(res => {
    if(res.code == '200'){
      load()
    }else {
      ElNotification.error("支付失败")
    }
  })
}
const handleDelete = (id) => {
  request.delete("/order/" + id).then(res => {
    if(res.code == '200'){
      ElNotification.success("删除成功")
      load()
    }else{
      ElNotification.error("删除失败")
    }
  })
  
}
</script>

<style scoped>

</style>